<template>
  <c-view>
    <template v-slot:header>
      <div class="title">
        {{ $route.meta.title }}
      </div>
    </template>
    <div class="main__box">
      <c-table
        ref="cTable"
        selection
        hasBorder
        :max-height="maxHeight"
        :size="size"
        :loading="isLoading"
        :table-header="tableHeader"
        :table-list="tableList"
        :table-inner-btns="tableInnerBtns"
        :page-info="pageInfo"
        @change-pagination="changePagination"
      >
        <template v-slot:header>
          <c-search :form-model="searchObj" :form-items="searchItems" @submit-form="searchSubmit" @reset-form="searchReset"></c-search>
        </template>
      </c-table>
    </div>
    <div v-if="dialogObj.isShow">
      <c-dialog
        class="dialog-box"
        :is-show="dialogObj.isShow"
        :title="dialogObj.title"
        close-btn
        @before-close="dialogObj.isShow = false"
        @on-submit="dialogConfirm"
      >
        <withdraw-audit ref="childRef" v-if="dialogObj.showType === 1" :init-data.sync="dialogObj.initData"></withdraw-audit>
        <upload-payment ref="childRef" v-if="dialogObj.showType === 2" :init-data.sync="dialogObj.initData"></upload-payment>
      </c-dialog>
    </div>
  </c-view>
</template>

<script>
import mixinTable from 'mixins/table'
import CDialog from 'components/dialog'
import dictObj from '@/store/dictData'
import utils from 'utils'
import withdrawAudit from './withdraw-audit'
import uploadPayment from './upload-payment'

export default {
  name: 'dispatcher',
  mixins: [mixinTable],
  components: {
    CDialog,
    withdrawAudit,
    uploadPayment
  },
  data(vm) {
    return {
      // 对话框对象
      dialogObj: {},
      // 表格内操作按钮
      tableInnerBtns: [],
      tableHeader: [
        {
          label: '提现申请人',
          prop: 'dispatcherName',
          fixed: true,
          search: {
            type: 'input'
          }
        },
        {
          label: '所属公司',
          prop: 'companyName',
          width: 170
        },
        {
          label: '申请金额(元)',
          prop: 'money',
          formatter: row => row && utils.formatMoney(row.money)
        },
        {
          label: '实际金额(元)',
          prop: 'actualMoney',
          formatter: row => row && utils.formatMoney(row.actualMoney)
        },
        {
          label: '扣款金额(元)',
          prop: 'deductionsMoney',
          formatter: row => row && utils.formatMoney(row.deductionsMoney)
        },
        {
          label: '扣款说明',
          prop: 'deductionsRemark',
          inline: true
        },
        {
          label: '提现状态',
          prop: 'status',
          formatter: row => row && vm.setTableColumnLabel(row.status, 'widthdrawStatus'),
          search: {
            type: 'dict',
            optionsList: dictObj.widthdrawStatus
          }
        },
        {
          label: '支付凭证',
          prop: 'certificatesUrl',
          isImage: true
        },
        {
          label: '支付时间',
          prop: 'payTime',
          width: 160
        },
        {
          label: '审核人',
          prop: 'auditName'
        },
        {
          label: '审核描述',
          prop: 'auditRemark',
          inline: true
        },
        {
          label: '审核时间',
          prop: 'auditTime',
          width: 160
        },
        {
          label: '申请时间',
          prop: 'createTime',
          width: 160
        }
      ]
    }
  },
  created() {
    const { name, params } = this.$route
    this.dispatcherId = params.id
    if (!this.dispatcherId && name === 'financeWidthdraw') {
      this.tableInnerBtns = [
        {
          name: '审核',
          icon: 'el-icon-view',
          width: 120,
          notBtn: row => row.status === 1 || row.status === 2 || row.status === 3,
          handle: row => {
            const { id, dispatcherId, money } = row
            this.dialogObj = {
              title: '审核',
              isShow: true,
              showType: 1,
              initData: {
                id,
                dispatcherId,
                money: utils.formatMoney(money),
                deductionsRemark: '1、扣除微信手续费千分之6，扣除金额 元；\n2、其他扣款'
              }
            }
          }
        },
        {
          name: '上传打款凭证',
          icon: 'el-icon-view',
          notBtn: row => row.status === 0 || row.status === 1 || row.status === 3,
          handle: row => {
            const { id, money, dispatcherId, deductionsMoney, deductionsRemark } = row
            this.dialogObj = {
              title: '上传打款凭证',
              isShow: true,
              showType: 2,
              initData: {
                id,
                deductionsMoney: utils.formatMoney(deductionsMoney),
                dispatcherId,
                deductionsRemark,
                money: utils.formatMoney(money)
              }
            }
          }
        }
      ]
    }
    this.fetchData()
  },
  methods: {
    /*
     * 查询表格列表数据
     */
    fetchData() {
      const { pageNo, pageSize } = this.pageInfo
      const { dateTime, ...other } = this.searchObj
      const searchDate = this.getSearchDate(dateTime, 'dateTime')
      this.isLoading = true
      this.$api.vehicle
        .fetch('queryDispatcherWithdraw', {
          ...searchDate,
          ...other,
          dispatcherId: this.dispatcherId,
          rows: pageNo,
          offset: pageSize
        })
        .then(res => {
          this.isLoading = false
          if (res && res.totalCount) {
            const { data, totalCount } = res
            this.pageInfo.totalNum = totalCount
            this.tableList = data || []
          } else {
            this.tableList = res || []
          }
        })
    },
    /**
     * dialog新增、编辑处理函数
     */
    dialogConfirm() {
      const childRef = this.$refs.childRef
      childRef.$refs.formRef.validate(valid => {
        if (valid) {
          const { showType } = this.dialogObj
          const { formModel, wxMoney } = childRef
          const { id, auditRemark, status, deductionsMoney, deductionsRemark, certificatesUrl, actualMoney } = formModel
          if (showType === 1) {
            if (status === 1 && !deductionsRemark) {
              return this.$msgTip('请填写不通过原因', 'warning')
            }
            this.$api.vehicle
              .fetch('auditWithdraw', {
                id,
                auditRemark,
                status,
                deductionsRemark,
                deductionsMoney: deductionsMoney * 100 + wxMoney
              })
              .then(() => {
                this.responeHandle('审核成功')
              })
          } else if (showType === 2) {
            this.$api.vehicle
              .fetch('uploadCertificates', {
                id,
                certificatesUrl,
                actualMoney: actualMoney * 100
              })
              .then(() => {
                this.responeHandle('上传凭证成功')
              })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
